<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<title>实操考核页</title>
		<link href="../../css/mui.min.css" rel="stylesheet"/>
		<!--<link rel="stylesheet" href="../../css/CFNetPP_Base.css">-->
		<link rel="stylesheet" type="text/css" href="../../css/base.css"/>
		<link rel="stylesheet" href="../../css/personal.css">
		<style>
			.imgDiv {
				position: absolute;
				padding-left: 5px;
				height: 240px;
				background-color: #ffffff;
				width: 100%;
			}
			/*
			 * 删除图片
			 */
			.deleteImg {
				position: absolute;
				margin-top: -0px;
				margin-left: -16px;
				width: 24px;
				height: 24px;
			}
			/*多张图片*/
			#ul1 {
				width: 100%;
				position: relative;
				margin: 10px auto;
			}
			#ul1 li {
				width: 60px;
				height: 50px;
				float: left;
				list-style: none;
				margin: 10px;
			}
			.left_px {
				margin-left: 5px;
			}
			.line_heigt_px {
				line-height: 50px;
			}
			.span_wight {
				width: 54%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		</style>
	</head>
	<body>
		<div class="base_style_color " id='BarAppearance' style="height: 22px;width: 100%"></div>
		<div class="base_navigation_bar base_style_color base_navigation_item_bar">
			<a class="base_left_item" href="#" onclick="backClick()"> <img class="base_back_icon" src="../../image/icon_jiantou.png" alt=""> </a>
			<span>实操考核</span>
			<a class="base_right_item" href="#" onclick="addpatrol()"> 提交 </a>
		</div>
		<div class="FieldOperation " style="margin-top: 66px">
			<div class="iptreason top_15" >
				<label class="shuoming ">实操证明：</label>
				<div class="imgDiv " id="imgDiv">
					<ul id="ul1" class="imagelist"></ul>
				</div>
			</div>
			<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a href="#" typeid="0">拍照</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="#" typeid="1">从相册选取</a>
					</li>
				</ul>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a href="#picture" typeid="2"><b>取消</b></a>
					</li>
				</ul>
			</div>
		</div>
	</body>
	<script src="../../script/mui.min.js"></script>
	<script src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/processing_images.js"></script>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script src="../../script/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script>
		var form_text = "1";
		var imageArr = new Array();
		//原路径图片路径
		var compressArr = new Array();
		//压缩路径图片路径
		var picurls = [];
		//上传后百度云的图片路径
		var cid;
		//企业id
		var time;
		var stuid = "";
		//学生id串
		apiready = function() {
			SendBehaviorTrajectoriesNotifi1('0', '实操考试页', '127',api.pageParam.sourceurl, api.pageParam.sourcetitle, window.location.pathname,  document.title);
			listimg();
		}
		function backClick() {
			SendBehaviorTrajectoriesNotifi1('1', '实操考试页', '127',api.pageParam.sourceurl, api.pageParam.sourcetitle, window.location.pathname,  document.title);
			api.closeWin();
		}

		/**
		 *添加图片
		 *  */
		function listimg() {
			var num = imageArr.length;
			var imageHtmls = '';
			if (num > 0 && num < 2) {
				for ( i = 0; i < num; i++) {
					var imageHtml = '<li>' + '<img class="selectImg" id=' + num + ' src=' + imageArr[i] + ' width="60"   height="60" />' + '<img class="deleteImg" id=' + num + ' src="../../image/del_pic.png" onClick="deleteImg(' + i + ')">' + '</li>';
					imageHtmls = imageHtmls + imageHtml;
				}
			}
			if (num < 1) {
				var seleimg = '<li>' + '<img class="selectImg"    src="../../image/add_pic.png" width="60"  onclick="setupActionSheet()" />' + '</li>';
				imageHtmls = imageHtmls + seleimg;
			}
			$("#ul1").html(imageHtmls);
		}

		/**
		 * *删除删除图片*/
		function deleteImg(i) {
			compressArr.splice(i, 1);
			imageArr.splice(i, 1);
			listimg();
		}

		//弹出拍照的底部框
		function setupActionSheet() {
			mui('#picture').popover('toggle');
			mui('body').on('tap', '.mui-popover-action li>a', function() {
				var typeid = $(this).attr('typeid');
				if (typeid == 0) {//拍照
					mui('#picture').popover('toggle');
					api.getPicture({
						sourceType : 'camera',
						encodingType : 'png',
						mediaValue : 'pic',
						destinationType : 'url',
						allowEdit : true,
						quality : 50,
						saveToPhotoAlbum : false
					}, function(ret, err) {
						if ($('#picture').is(':visible')) {
							$('#picture').hide();
						}
						if (ret) {
							var photoPath = ret.data;
							if (photoPath != '') {
								imageArr.push(photoPath);
								listimg();
							}
						} else {
						}
					});
				} else if (typeid == 1) {//从相册选择
					mui('#picture').popover('toggle');
					api.getPicture({
						sourceType : 'album',
						encodingType : 'png',
						mediaValue : 'pic',
						destinationType : 'url',
						allowEdit : true,
						quality : 50,
						saveToPhotoAlbum : false
					}, function(ret, err) {
						if ($('#picture').is(':visible')) {
							$('#picture').hide();
						}
						if (ret) {
							var photoPath = ret.data;
							if (photoPath != '') {
								imageArr.push(photoPath);
								listimg();
							}
						} else {
						}
					});
				}
			});
		}

		//上传图片
		function addpatrol() {
			$('.base_right_item').hide();
			api.showProgress({
				style : 'default',
				animationType : 'fade',
				title : '正在上传...',
				text : '请稍候...',
				modal : false
			});
			var num = imageArr.length;
			if (num > 0) {//有图片
				for (var i = 0; i < num; i++) {
					imgCompress(imageArr[i], 0.5, 0.5, function(compressImg) {
						UploadFile_ali(Upload_File_img, compressImg, function(ret) {
							picurls.push(ret.fileurl);
							var k = picurls.length;
							if (k == num) {
								var str = picurls.join(",");
								Upload_data(str);
							}
						});
					});
				}
			} else {//无图片
				Upload_data(report, "");
			}
		}

		//上传数据
		function Upload_data(imageurl) {
			params = {
				uid : $api.getStorage('cfnetppuid'),
				quarter_id : api.pageParam.id,
				fileurl : imageurl,
			};
			cfnetppPOST(url_addpractical, params, false, function(data, status) {
				//			alert(JSON.stringify(params));
				api.hideProgress();
				SendBusinessOperationsLogNotifi('实操考试页', '127', params, params, '', data, '认证实操考核提交接口', '127-01')
				if (status == 'success') {
					if (data.code == 200) {
						api.toast({
							msg : '添加成功'
						});
						api.closeWin();
					} else if (data.code == 103) {
						api.toast({
							msg : '实操信息已存在，请勿重复提交'
						});
					} else {
						$('.base_right_item').show();
						api.toast({
							msg : '添加失败'
						});
					}
				} else {
					$('.base_right_item').show();
					api.toast({
						msg : '添加失败'
					});
				}
			});
		}
	</script>
</html>
